<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>新闻</title>
    <link href="css/index.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="jumbotron" style="background-color: #3c763d;">
            <h1>
                <center style="color: white;">新闻报道</center>
            </h1>
            <p>
                <center style="color: white;">为您实时报道</center>
            </p>
        </div>

        <br />

        <ul class="nav nav-pills">
            <li class="active" style="background-color: green;"><a href="#" style="background-color: #3c763d;">首页</a></li>
        </ul>

        <br />

        <h4><b>最新文章</b></h4>
        <hr />
        <div class="row">
            <ul class="col-sm-6" id="text1">

            </ul>
            <ul class="col-sm-6" id="text2">

            </ul>
        </div>

        <br /><br />
        <div class="footer-main" style="align-content: center;padding-top: 200px;">
            <center>Copyright &copy GaoLainan, 2020&nbsp;<a href="login.html">新闻后台管理系统</a></center>
        </div>

    </div>
</body>
<script>
    var res = []

    window.onload = function() {
        console.log("success")
        $.ajax({
            type: "POST",
            url: "http://localhost:8080/news/top",
            data: {

            },
            dataType: "json",
            success: function(data) {
                res = data
                console.log(data)
                var div1 = document.getElementById("text1");
                var div2 = document.getElementById("text2");
                var code1 = ''
                var code2 = ''
                for (var i = 0; i < 4; i++) {
                    code1 += '<li onclick="test(this)">-- ' + data[i].title + '---------------发布日期：' + data[i].publishTime + '</li><br /><br />'
                }
                for (var i = 4; i < 8; i++) {
                    code2 += '<li onclick="test1(this)">-- ' + data[i].title + '---------------发布日期：' + data[i].publishTime + '</li><br /><br />'
                }
                div1.innerHTML = code1
                div2.innerHTML = code2

                var li = div1.children;
                for (var k = 0; k <= li.length - 1; k += 1) {
                    li[k].index = k; // 添加属性

                }

                var li = div2.children;
                for (var j = 0; j <= li.length - 1; j++) {
                    li[j].index = j; // 添加属性
                }
            },
            fail: function() {
                alert("系统繁忙")
            }
        });
    }

    function test(x) {
        console.log(x.index)
        if (x.index == 9) {
            sessionStorage.setItem("newId", res[3].id);
        } else if (x.index == 6) {
            sessionStorage.setItem("newId", res[2].id);
        } else if (x.index == 3) {
            sessionStorage.setItem("newId", res[1].id);
        } else {
            sessionStorage.setItem("newId", res[0].id);
        }

        window.location.href = "details.html"
    }

    function test1(x) {
        console.log(x.index)
        if (x.index == 9) {
            sessionStorage.setItem("newId", res[7].id);
        } else if (x.index == 6) {
            sessionStorage.setItem("newId", res[6].id);
        } else if (x.index == 3) {
            sessionStorage.setItem("newId", res[5].id);
        } else {
            sessionStorage.setItem("newId", res[4].id);
        }

        window.location.href = "details.html"
    }
</script>

</html>